@import "../styles/variables";
@import "../styles/input";

$tooltip-arrow-width: 3px;
$tooltip-arrow-offset: $tooltip-arrow-width + 1;
$tooltip-arrow-color: #666666;
$tooltip-error-color: #ff867c;

%tooltip {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	display: none;
	font-size: $font-size-text;
	border-radius: 2px;
	padding: 4px 8px;
	margin: 0;

	min-height: 26px;
	max-width: 250px;
	line-height: 1.5;
	box-shadow: none;
	border: none;
	background-color: #666666;
	color: #f8f8f8;

	&.tooltip-opened {
		display: block;
	}

	&:before {
		content: "";
		border: none;
	}

	&:after {
		content: "";
		position: absolute;
		border: solid transparent;
	}

	&.top:after {
		bottom: 0;
		left: 50%;
		margin-left: -$tooltip-arrow-width;
		margin-bottom: -$tooltip-arrow-width;
		border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
		border-top-color: $tooltip-arrow-color;
	}
	&.top-left:after {
		bottom: 0;
		left: $tooltip-arrow-offset;
		margin-bottom: -$tooltip-arrow-width;
		border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
		border-top-color: $tooltip-arrow-color;
	}
	&.top-right:after {
		bottom: 0;
		right: $tooltip-arrow-offset;
		margin-bottom: -$tooltip-arrow-width;
		border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
		border-top-color: $tooltip-arrow-color;
	}
	&.right:after {
		top: 50%;
		left: -$tooltip-arrow-width;
		margin-top: -$tooltip-arrow-width;
		border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
		border-right-color: $tooltip-arrow-color;
	}
	&.left:after {
		top: 50%;
		right: -$tooltip-arrow-width;
		margin-top: -$tooltip-arrow-width;
		border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
		border-left-color: $tooltip-arrow-color;
	}
	&.bottom:after {
		top: -$tooltip-arrow-width;
		left: 50%;
		margin-left: -$tooltip-arrow-width;
		border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
		border-bottom-color: $tooltip-arrow-color;
	}
	&.bottom-left:after {
		top: 0;
		left: $tooltip-arrow-offset;
		margin-top: -$tooltip-arrow-width;
		border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
		border-bottom-color: $tooltip-arrow-color;
	}
	&.bottom-right:after {
		top: 0;
		right: $tooltip-arrow-offset;
		margin-top: -$tooltip-arrow-width;
		border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
		border-bottom-color: $tooltip-arrow-color;
	}

}

// 主要错误提示,用于空间足够的场景
.error-major-tooltip {
	display: none;
	color: $tooltip-error-color;
	margin-left: 12px;

	&.tooltip-opened {
		display: inline;
	}
}

.normal-tooltip {
	@extend %tooltip;
}

// 浮动错误提示,用于空间不足场景
.error-minor-tooltip {
	@extend %tooltip;
	background-color: $tooltip-error-color;
	color: #ffffff;
	&.top, &.top-left, &.top-right {
		&:after {
			border-top-color: $tooltip-error-color !important;
		}
	}

	&.right {
		&:after {
			border-right-color: $tooltip-error-color !important;
		}
	}

	&.left {
		&:after {
			border-left-color: $tooltip-error-color !important;
		}
	}

	&.bottom, &.bottom-left, &.bottom-right {
		&:after {
			border-bottom-color: $tooltip-error-color !important;
		}
	}
}

.error-minor-tooltip-attached {
	border: 1px solid $input-error-border !important;
}


